<template>
  <div>

    <div class="row minw100">
          <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box grey-cascade">
              <div class="portlet-title">
                <div class="caption" v-if="type=='add'">
                  <i class="fa fa-globe"></i>新增RTU
                </div>
                <div class="caption" v-if="type=='update'">
                  <i class="fa fa-globe"></i>编辑RTU
                </div>
                <div class="caption" v-if="type=='infor'">
                  <i class="fa fa-globe"></i>RTU详情
                </div>            
              </div>
              <div class="portlet-body">
                <div class="row mr0 focusNone">
                  <div class="col-md-6 color">
                      <div class="col-md-3 l10"><span class="require">*</span> RTU名称 :</div>
                      <div class="col-md-9">
                      <input class="form-control" v-model="rtu_name"  v-on:input = "inputFunc($event)" placeholder="请输入RTU名称"  type="text" :readonly="is_modifly">
                      </div>
                      <span class="errorInfor errorName hide">不能为空</span>
                  </div>
                  <div class="col-md-6 color">
                      <div class="col-md-3 l10">
                      <span class="require">*</span>
                      RTU编号 :</div>
                      <div class="col-md-9">
                        <input class="form-control" v-model="rtu_no" v-on:input = "inputFunc($event)" placeholder="请输入RTU编号"  type="text" :readonly="is_modifly">
                      </div>
                      <span class="errorInfor errorNo hide">不能为空</span>
                  </div>
             
                  <div class="col-md-6 color top" v-if="type=='infor'">
                      <div class="col-md-3 l10">
                        <span class="require">*</span>
                        物理地址 :
                      </div>
                      <div class="col-md-9">
                      <input class="form-control" readonly="true" :value="roomName"   type="text">
                    </div>
                  </div>
                  <div class="col-md-6 color" v-if="type!='infor'">
                      <div class="col-md-3 l10">
                        <span class="require">*</span>
                        物理地址  :
                      </div>
                      <div class="col-md-9">
                      
                        <select v-model="selected" class="bs-select form-control" @change="changeSelect(selected)" style="margin-right: 25px;">
                      <option value="-1">请选择物理地址</option>
                      <option v-for="(item,index) in xqdlist" :value="item.room_id">{{item.room_name}}</option>
                      
                        </select>


                      </div>
                      <span class="errorInfor errorZt hide">请选择物理地址</span>
                  </div>
                  <div class="col-md-6 color" v-if="type=='add'">
                    <span class="col-md-3 l10"><span class="require">*</span> RTU状态 :</span>
                    <div class="col-md-9" style="position: relative;left: 20px;">
                      <div class="radio-list">
                        <label class="radio-inline" @click="leaderPe($event)">
                            <div class="radio" id="uniform-optionsRadios27">
                              <span >  <!-- :class="{'active':$index==0}" -->
                                <input type="radio" name="optionsRadios" checked="true" id="optionsRadios27" value=true>
                              </span>
                            </div>
                          <font><font  style="color: #333;font-weight: 500;"> 启用 </font></font>
                        </label>
                        <label class="radio-inline" @click="leaderPe($event)">
                          <div class="radio" id="uniform-optionsRadios28">
                            <span>
                              <input type="radio" name="optionsRadios" id="optionsRadios28"
                               value=false>
                            </span>
                          </div>
                          <font><font  style="color: #333;font-weight: 500;"> 禁用 </font></font>
                        </label>
                      
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 color" v-if="type=='update'">
                    <span class="col-md-3 l10"><span class="require">*</span> RTU状态 :</span>
                    <div class="col-md-9" style="position: relative;left: 20px;">
                      <div class="radio-list">
                        <label class="radio-inline" @click="leaderPe($event)">
                            <div class="radio" id="uniform-optionsRadios27">
                              <span >  <!-- :class="{'active':$index==0}" -->
                                <input type="radio" name="optionsRadios" :checked="status==1" id="optionsRadios27" value=true>
                              </span>
                            </div>
                          <font><font  style="color: #333;font-weight: 500;"> 启用 </font></font>
                        </label>
                        <label class="radio-inline" @click="leaderPe($event)">
                          <div class="radio" id="uniform-optionsRadios28">
                            <span>
                              <input type="radio" name="optionsRadios" id="optionsRadios28":checked="status==0"
                               value=false>
                            </span>
                          </div>
                          <font><font  style="color: #333;font-weight: 500;"> 禁用 </font></font>
                        </label>
                      
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6 color" v-if="type=='infor'">
                    <div class="col-md-3 l10">  
                    <span class="require">*</span>
                      RTU状态 :
                    </div>
                    <div class="col-md-9">
                      <input class="form-control" :readonly="is_modifly" value="启用"  type="text" v-if="status==1">
                      <input class="form-control" :readonly="is_modifly" value="禁用"  type="text" v-if="status==0">
                    </div>
                  </div>
                  <div class="clearfix"></div>

                  <div class="col-md-6 color">
                    <div class="col-md-3 l10"><span class="require">*</span> IP地址 :</div>
                    <div class="col-md-9">
                      <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="ip" placeholder="请输入IP地址" type="text">
                    </div>
                    <span class="errorInfor errorIp hide">不能为空</span>
                  </div>
                  <div class="col-md-6 color top">
                    <div class="col-md-3 l10"> <span class="require">*</span> 端口号 :</div>
                    <div class="col-md-9">
                      <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="port" placeholder="请输入端口号" type="text">
                    </div>
                    <span class="errorInfor errorPort hide">不能为空</span>
                  </div>
                  <div class="col-md-6 color" v-if="type=='infor'">
                    <div class="col-md-3">设备生产日期 :</div>
                    <div class="col-md-9">
                      <input class="form-control" readonly="true" :value="mfg_date" placeholder="设备生产日期" type="text">
                    </div>
                  </div>
                  <div class="col-md-6 color" v-if="type!='infor'">
                    <div class="col-md-3">设备生产日期 :</div>
                    <div class="col-md-9">
                      <input class="form-control form-control-inline date-picker date-picker1" readonly="true" :value="mfg_date" placeholder="设备生产日期" type="text">
                    </div>
                  </div>

                  <div class="col-md-6 color" v-if="type=='infor'">
                    <div class="col-md-3">质保到期日期 :</div>
                    <div class="col-md-9">
                      <input class="form-control" readonly="true" :value="exp_date" placeholder="质保到期日期" type="text">
                    </div>
                  </div>
                  <div class="col-md-6 color" v-if="type!='infor'">
                    <div class="col-md-3">质保到期日期 :</div>
                    <div class="col-md-9">
                      <input class="form-control form-control-inline date-picker date-picker2" readonly="true" :value="exp_date" placeholder="质保到期日期" type="text">
                    </div>
                  </div>

                  <div class="col-md-6 color">
                    <div class="col-md-3">制造单位 :</div>
                    <div class="col-md-9">
                      <input class="form-control" :readonly="is_modifly" :value="mfg_company" placeholder="制造单位" type="text">
                    </div>
                  </div>
                  
                  

                 
                  <div class="col-md-12">
                    <div class="col-md-2" style="font-weight: 500;color: #666;">
                      备注 :
                    </div>
                    <div class="col-md-10" style="font-weight: 500;color: #333;">
                      <textarea v-model="extra_desc" class="form-control" rows="3" :readonly="is_modifly" style="resize: none;width: 821px;position: relative;left: -44px;" placeholder="备注"></textarea>
                    </div>
                  </div> 

                  <div class="col-md-12" style="position: relative;margin-top: 20px;">
                    <div style="text-align: center;">

                      <router-link to="/rtugl" tag="a" class="btn default">
                        返回
                      </router-link>
                      <button type="button" v-if="type=='update'"@click="saveData($event)" class="btn blue">保存</button>
                      <button type="button" v-if="type=='add'" @click="saveAddData($event)" class="btn blue">新增</button>
                    </div>
                  </div>
                </div>
                
              </div>
            </div>

          </div>
      </div>

    <!-- 部门选择开始 -->
    <div id="depet" class="modal fade" tabindex="-1" >
      <div class="modal-title">
        <p>
           请选择部门?
        </p>
      </div>
      <div class="modal-body">
        <p style="color: #ff3300;">
          
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        <button type="button" data-dismiss="modal" class="btn blue">确定</button>
      </div>
    </div>
    <!-- 部门选择结束 --> 

    

  </div>

</template>

<style scoped>
  .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
    input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .col-md-9{color: #333;font-weight: 500;}
      .col-md-6.color{margin-bottom: 10px;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .col-md-6.color .col-md-3{color: #666;font-weight: 500;position: relative;top: 5px;}
    .numData{font-size: 16px;}
    .col-md-12.color .col-md-3{margin-bottom: 10px;}
    .tree-view-item-key {
      font-size: 20px;
      color: black;
    }
    .portlet.box>.portlet-body {
    background-color: #fff;
    padding: 65px 10px;
}

    .tree-view-item-value {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }
    /*.col-md-6.top{position: relative;top: -70px;}*/
    .errorInfor {
        right: 40px;
    }
    .halo-tree{position: relative;}
    .deptDiv{position: absolute;left: 15px;right: 15px;top: 34px;z-index:100;background: #fff;border: 1px solid #dbdbdb;border-top:none;padding: 0 12px;}
    .focusNone{width: 1000px;margin: 0 auto;}
    input.form-control,.bs-select.form-control{width: 100%;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>
<style>
  .treeDiv .inputCheck,.treeDiv .checkDiv img{display: none !important;}
</style>
<script>

  import '../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';

  import '../../../../../static/global/plugins/datatables/media/js/jquery.dataTables.min.js';

  import Metronic from '../../../../../static/global/js/metronic.js';
  import {check,Tips} from '../../../../../static/js/pages/tips.js';

  // import ComponentsPickers from '../../../static/js/pages/components-pickers.js';


  import Headers from '../../../../components/Headers.vue';
  import Bars from '../../../../components/Bars.vue';
  import Foot from '../../../../components/Foot.vue';
  import NotConTip from '../../../../components/noConTip.vue' 
  import optVue from '../../../../config/optVue.js';
  export default {
    data(){
      return{
        type:'',
        is_modifly:true,
        roleList:[],
        listObj:{},
        number:0,
        title:"",
     
        room_id:-1,
        selected:-1,

        rtu_id:"",
        xqdlist:[],
        glNum:2,
        glNumChild:1,
        rtu_name:"",
        rtu_no:"",
        ip:"",
        port:"",
        status:1,
        mfg_date:"",
        exp_date:"",
        mfg_company:"",
        extra_desc:"",
        roomName:""
      }
    },
    components: {
        Headers,Bars,Foot,NotConTip
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.title = document.title;
      var that = this;

      this.type = this.$route.query.type;
      var dataArr = {
        ril : "S"
      }
      optVue.getFjListgl(this,dataArr);
      if(this.type=='update'){ //修改
        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
      }

      if(this.type=='infor'){ //修改

        this.rtu_id = window.localStorage.getItem('rtu_id');
        optVue.getModifyRTU(this,this.rtu_id);
        this.is_modifly = true;
      }
      

      if(that.type!='infor'){
        $('.date-picker1').datepicker({
          rtl: Metronic.isRTL(),
          orientation: "left",
          autoclose: true,
          format: "yyyy-mm-dd"
        }).on('changeDate',function(){
          that.mfg_date = $(this).val();
        }); 
        $('.date-picker2').datepicker({
            rtl: Metronic.isRTL(),
            orientation: "left",
            autoclose: true,
            format: "yyyy-mm-dd"
          }).on('changeDate',function(){
            that.exp_date = $(this).val();
        });
      
      }
      
      $(function(){
        // ComponentsPickers.init();
        
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
     
      })
    },
    methods:{     
      
      changeSelect:function(select){
        this.room_id = select;
        console.log(this.room_id)
        if(this.room_id != -1){
          $(".errorZt").addClass("hide");
          $(".errorZt").closest(".col-md-6").find("input").removeClass("errorInput");
        }
      },
   
     
      leaderPe:function(e){
        this.status = $(e.currentTarget).find("input").val();

      },
     
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput")
          
        }
      },
      isValidate:function(e){
        var res = true;
        if(this.rtu_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        if(this.rtu_no==""){
          $(".errorNo").removeClass("hide");
          $(".errorNo").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
       

        if(this.room_id==-1){
          $(".errorZt").removeClass("hide");
          $(".errorZt").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }
        if(this.ip==""){
          $(".errorIp").removeClass("hide");
          $(".errorIp").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
        if(this.port==""){
          $(".errorPort").removeClass("hide");
          $(".errorPort").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
        return res;
      },
      saveData:function(e){
        
        if(this.isValidate(e)){
          var dataArr = {
            rtu_name:this.rtu_name,
            rtu_no:this.rtu_no,
            room_id:this.room_id,
            ip:this.ip,
            port:this.port,
            status:this.status,
            mfg_date:this.mfg_date,
            exp_date:this.exp_date,
            mfg_company:this.mfg_company,
            extra_desc:this.extra_desc
          }

          console.log(JSON.stringify(dataArr))
          optVue.addModifyRtu(this,dataArr,Tips,this.rtu_id);
        } 
      },
      saveAddData:function(e){
        if(this.isValidate(e)){
          var dataArr = {
            rtu_name:this.rtu_name,
            rtu_no:this.rtu_no,
            room_id:this.room_id,
            ip:this.ip,
            port:this.port,
            status:this.status,
            mfg_date:this.mfg_date,
            exp_date:this.exp_date,
            mfg_company:this.mfg_company,
            extra_desc:this.extra_desc
          }

          console.log(JSON.stringify(dataArr))
          optVue.addRtu(this,dataArr,Tips);
        } 
      }

    }
  
  }


</script>



